<template>
  <div>
    <nav-bar :title="title"></nav-bar>
    <div class="signIn maxinBox">
      <van-tabs type="card" v-model="active" @click="onClick">
        <van-tab title="实时监控">
          <h4 style="padding: 0 0.9375rem;">司机信息</h4>
          <div class="backgroundfff" style="margin-top: 1.25rem;font-size: 0.875rem;" v-if="lifterData.lifterDeviceDriverVo">
            <van-row class="realTimeTask">
              <van-col :span="7">
                <img style="width: 80%;" :src="lifterData.lifterDeviceDriverVo.url" alt="">
              </van-col>
              <van-col :span="17">
                <div style="color: #666;" class="fontSize14">{{lifterData.lifterDeviceDriverVo.driveName || '--'}}</div>
                <div style="color: #666;" class="fontSize14">联系方式: {{lifterData.lifterDeviceDriverVo.phone || '--'}}</div>
                <div style="color: #666;" class="fontSize14">身份证号：{{lifterData.lifterDeviceDriverVo.id || '--'}}</div>
                <div style="color: #666;" class="fontSize14">工种证件: {{lifterData.lifterDeviceDriverVo.certificate || '--'}}</div>
              </van-col>
            </van-row>
          </div>
          <h4 style="padding: 0 0.9375rem;">运行状况</h4>
          <div class="backgroundfff" style="margin-top: 1.25rem;font-size: 0.875rem;">
            <van-row>
              <van-col :span="12">
                <my-echarts id="myChat" :options="chatData" style="height: 12.5rem"></my-echarts>
              </van-col>
              <van-col :span="12">
                <my-echarts id="myChat2" :options="chatData2" style="height: 12.5rem"></my-echarts>
              </van-col>
              <van-col :span="12">
                <my-echarts id="myChat3" :options="chatData3" style="height: 12.5rem"></my-echarts>
              </van-col>
              <van-col :span="12">
                <my-echarts id="myChat4" :options="chatData4" style="height: 12.5rem"></my-echarts>
              </van-col>
              <van-col :span="12">
                <my-echarts id="myChat5" :options="chatData5" style="height: 12.5rem"></my-echarts>
              </van-col>
              <van-col :span="12">
                <my-echarts id="myChat6" :options="chatData6" style="height: 12.5rem"></my-echarts>
              </van-col>
            </van-row>
            <van-row style="padding: 0.625rem">
              <van-col :span="12" style="padding: 0.1875rem;" class="center">
                <div style="background-color: #F7F9FB;">
                  <img :src="openDoor" alt="" style="padding: 1.875rem 0" v-if="lifterData.realTimeDataVos[6].realData">
                  <img :src="closeDoor" alt="" style="padding: 1.875rem 0" v-else>
                </div>
                <p>前门</p>
              </van-col>
              <van-col :span="12" style="padding: 0.1875rem;" class="center">
                <div style="background-color: #F7F9FB;">
                  <img :src="openDoor" alt="" style="padding: 1.875rem 0" v-if="lifterData.realTimeDataVos[7].realData">
                  <img :src="closeDoor" alt="" style="padding: 1.875rem 0" v-else>
                </div>
                <p>后门</p>
              </van-col>
            </van-row>
          </div>
        </van-tab>
        <van-tab title="告警监控">
          <h4 style="padding: 0 0.9375rem;">当前警告</h4>
          <div class="backgroundfff" style="margin-top: 1.25rem;font-size: 0.875rem;" v-if="lifterData1.warnDataVos">
            <van-row class="realTimeTask center">
              <van-col :span="8">
                <van-button v-if="lifterData1.warnDataVos[0].warn === '1'" type="danger" size="small">倾斜</van-button>
                <van-button v-else size="small">倾斜</van-button>
              </van-col>
              <van-col :span="8">
                <van-button v-if="lifterData1.warnDataVos[1].warn === '1'" type="danger" size="small">轿门</van-button>
                <van-button v-else size="small">轿门</van-button>
              </van-col>
              <van-col :span="8">
                <van-button v-if="lifterData1.warnDataVos[2].warn === '1'" type="danger" size="small">超重</van-button>
                <van-button v-else size="small">超重</van-button>
              </van-col>
            </van-row>
            <van-row class="realTimeTask center">
              <van-col :span="8">
                <van-button v-if="lifterData1.warnDataVos[3].warn === '1'" type="danger" size="small">超速</van-button>
                <van-button v-else size="small">超速</van-button>
              </van-col>
              <van-col :span="8">
                <van-button v-if="lifterData1.warnDataVos[4].warn === '1'" type="danger" size="small">冲顶</van-button>
                <van-button v-else size="small">冲顶</van-button>
              </van-col>
              <van-col :span="8">
                <van-button v-if="lifterData1.warnDataVos[5].warn === '1'" type="danger" size="small">传感器故障</van-button>
                <van-button v-else size="small">传感器故障</van-button>
              </van-col>
            </van-row>
          </div>
          <h4 style="padding: 0 0.9375rem;">告警历史</h4>
          <div class="backgroundfff" style="margin-top: 1.25rem;font-size: 0.875rem;" v-if="lifterData1.warnHistories.length">
            <div class="tableData center">
              <van-row class="tableContent backgroundfff" v-for="(item, index) in lifterData1.warnHistories" :key="index">
                <van-col :span="24">{{item.time | formatDate('YYYY-MM-DD HH:mm:ss')}} {{item.content || '--'}}；</van-col>
              </van-row>
            </div>
          </div>
          <h4 style="padding: 0 0.9375rem;">运行一周记录</h4>
          <div class="backgroundfff" style="margin-top: 1.25rem;font-size: 0.875rem;">
            <my-echarts id="myChat1" :options="chatData1"></my-echarts>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
  import openDoor from '../../../../assets/images/openDoor.png'
  import closeDoor from '../../../../assets/images/closeDoor.png'
  import MyEcharts from '../../../../components/MyChart.vue'
  import hardwareManageAPI from '../../../../api/workAPI/hardwareManageAPI.js'
  export default {
    components: {
      MyEcharts
    },
    data() {
      return {
        type: localStorage.getItem('hardwareType'),
        openDoor: openDoor,
        closeDoor: closeDoor,
        title: JSON.parse(localStorage.getItem('hardwareData')).deviceName,
        lifterData: null,
        lifterData1: null,
        active: 0,
        chatData: null,
        chatData1: null
      }
    },
    methods: {
      getLifterData() {
        let data = {
          deviceId: JSON.parse(localStorage.getItem('hardwareData')).id,
          type: 1
        }
        hardwareManageAPI.getLifterData(data).then(res => {
            this.lifterData = res
            let color = new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: '#00C6FF' // 0% 处的颜色
                },
                {
                    offset: 1,
                    color: '#00C6FF' // 100% 处的颜色
                }
            ]);
            this.chatData = {
                series: [{ //内圆
                        type: 'pie',
                        radius: '80%',
                        center: ['50%', '50%'],
                        z: 0,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff',
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        },
                    },
                    {
                        type: 'gauge',
                        name: '外层辅助',
                        radius: '90%',
                        startAngle: '225',
                        endAngle: '-45',
                        splitNumber: '100',
                        pointer: {
                            show: false
                        },
                        detail: {
                            show: false,
                        },
                        data: [{
                            value: 1
                        }],
                        title: {
                            show: true,
                            offsetCenter: [0, 30],
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontWeight: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 20,
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            length: 10,
                            lineStyle: {
                                color: '#00C6FF',
                                width: 0,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    {
                        type: 'gauge',
                        radius: '83%',
                        startAngle: '225',
                        endAngle: '-45',
                        pointer: {
                            show: false
                        },
                        detail: {
                            formatter: function(value) {
                                var num = Math.round(value);
                                return '{bule|' + num + '}' + '{size|' + '}\n{radius| 高度（m）\}';
                            },
                            rich: {
                                bule: {
                                    fontSize: 30,
                                    fontFamily: 'DINBold',
                                    color: '#00C6FF',
                                    fontWeight: '700',
                                    padding: [10, 0, 0, 0],
                                },
                                radius: {
                                    width: 175,
                                    height: 0,
                                    fontSize: 15,
                                    color: '#999',
                                    borderRadius: 10,
                                    textAlign: 'center',
                                },
                                size: {
                                    height: 100,
                                    padding: [0, 0, 0, 0]
                                }
                            },
                            "offsetCenter": ['0%', "0%"],
                        },
                        data: [{
                            value: res.realTimeDataVos[0].realData.toFixed(2) || 0,
                            name: '高度（m）'
                        }],
                        title: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [0.91, color],
                                    [1, '#F4F4F4']
                                ],
                                width: 15,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                            length: 25,
                            lineStyle: {
                                color: '#00377a',
                                width: 2,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        },
                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        z: 2,
                        radius: '60%',
                        startAngle: '225',
                        endAngle: '-45',
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        detail: {
                            show: 0
                        }
                    },
                    {
                        name: "白色圈刻度",
                        type: "gauge",
                        radius: "60%",
                        startAngle: 225, //刻度起始
                        endAngle: -45, //刻度结束
                        z: 4,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 16, //刻度节点线长度
                            lineStyle: {
                                width: 2,
                                color: 'rgba(1,244,255, 0.9)'
                            } //刻度节点线
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,0)',
                            fontSize: 12,
                        }, //刻度节点文字颜色
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        detail: {
                            show: false
                        },
                        data: [{
                            value: 0,
                            name: ""
                        }]
                    },
                    { //内圆
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '50%'],
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: .5,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff'
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        }
                    },
                ]
            }
            this.chatData2 = {
                series: [{ //内圆
                        type: 'pie',
                        radius: '80%',
                        center: ['50%', '50%'],
                        z: 0,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff',
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        },
                    },
                    {
                        type: 'gauge',
                        name: '外层辅助',
                        radius: '90%',
                        startAngle: '225',
                        endAngle: '-45',
                        splitNumber: '100',
                        pointer: {
                            show: false
                        },
                        detail: {
                            show: false,
                        },
                        data: [{
                            value: 1
                        }],
                        title: {
                            show: true,
                            offsetCenter: [0, 30],
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontWeight: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 20,
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            length: 10,
                            lineStyle: {
                                color: '#00C6FF',
                                width: 0,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    {
                        type: 'gauge',
                        radius: '83%',
                        startAngle: '225',
                        endAngle: '-45',
                        pointer: {
                            show: false
                        },
                        detail: {
                            formatter: function(value) {
                                var num = Math.round(value);
                                return '{bule|' + num + '}' + '{size|' + '}\n{radius| 载重（t）\}';
                            },
                            rich: {
                                bule: {
                                    fontSize: 30,
                                    fontFamily: 'DINBold',
                                    color: '#00C6FF',
                                    fontWeight: '700',
                                    padding: [10, 0, 0, 0],
                                },
                                radius: {
                                    width: 175,
                                    height: 0,
                                    fontSize: 15,
                                    color: '#999',
                                    borderRadius: 10,
                                    textAlign: 'center',
                                },
                                size: {
                                    height: 100,
                                    padding: [0, 0, 0, 0]
                                }
                            },
                            "offsetCenter": ['0%', "0%"],
                        },
                        data: [{
                            value: res.realTimeDataVos[1].realData.toFixed(2),
                            name: '载重（t）'
                        }],
                        title: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [0.91, color],
                                    [1, '#F4F4F4']
                                ],
                                width: 15,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                            length: 25,
                            lineStyle: {
                                color: '#00377a',
                                width: 2,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        },
                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        z: 2,
                        radius: '60%',
                        startAngle: '225',
                        endAngle: '-45',
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        detail: {
                            show: 0
                        }
                    },
                    {
                        name: "白色圈刻度",
                        type: "gauge",
                        radius: "60%",
                        startAngle: 225, //刻度起始
                        endAngle: -45, //刻度结束
                        z: 4,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 16, //刻度节点线长度
                            lineStyle: {
                                width: 2,
                                color: 'rgba(1,244,255, 0.9)'
                            } //刻度节点线
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,0)',
                            fontSize: 12,
                        }, //刻度节点文字颜色
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        detail: {
                            show: false
                        },
                        data: [{
                            value: 0,
                            name: ""
                        }]
                    },
                    { //内圆
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '50%'],
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: .5,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff'
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        }
                    },
                ]
            }
            this.chatData3 = {
                series: [{ //内圆
                        type: 'pie',
                        radius: '80%',
                        center: ['50%', '50%'],
                        z: 0,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff',
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        },
                    },
                    {
                        type: 'gauge',
                        name: '外层辅助',
                        radius: '90%',
                        startAngle: '225',
                        endAngle: '-45',
                        splitNumber: '100',
                        pointer: {
                            show: false
                        },
                        detail: {
                            show: false,
                        },
                        data: [{
                            value: 1
                        }],
                        title: {
                            show: true,
                            offsetCenter: [0, 30],
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontWeight: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 20,
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            length: 10,
                            lineStyle: {
                                color: '#00C6FF',
                                width: 0,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    {
                        type: 'gauge',
                        radius: '83%',
                        startAngle: '225',
                        endAngle: '-45',
                        pointer: {
                            show: false
                        },
                        detail: {
                            formatter: function(value) {
                                var num = Math.round(value);
                                return '{bule|' + num + '}' + '{size|' + '}\n{radius| 速度（m/s）\}';
                            },
                            rich: {
                                bule: {
                                    fontSize: 30,
                                    fontFamily: 'DINBold',
                                    color: '#00C6FF',
                                    fontWeight: '700',
                                    padding: [10, 0, 0, 0],
                                },
                                radius: {
                                    width: 175,
                                    height: 0,
                                    fontSize: 15,
                                    color: '#999',
                                    borderRadius: 10,
                                    textAlign: 'center',
                                },
                                size: {
                                    height: 100,
                                    padding: [0, 0, 0, 0]
                                }
                            },
                            "offsetCenter": ['0%', "0%"],
                        },
                        data: [{
                            value: res.realTimeDataVos[2].realData.toFixed(2),
                            name: '速度（m/s）'
                        }],
                        title: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [0.91, color],
                                    [1, '#F4F4F4']
                                ],
                                width: 15,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                            length: 25,
                            lineStyle: {
                                color: '#00377a',
                                width: 2,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        },
                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        z: 2,
                        radius: '60%',
                        startAngle: '225',
                        endAngle: '-45',
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        detail: {
                            show: 0
                        }
                    },
                    {
                        name: "白色圈刻度",
                        type: "gauge",
                        radius: "60%",
                        startAngle: 225, //刻度起始
                        endAngle: -45, //刻度结束
                        z: 4,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 16, //刻度节点线长度
                            lineStyle: {
                                width: 2,
                                color: 'rgba(1,244,255, 0.9)'
                            } //刻度节点线
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,0)',
                            fontSize: 12,
                        }, //刻度节点文字颜色
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        detail: {
                            show: false
                        },
                        data: [{
                            value: 0,
                            name: ""
                        }]
                    },
                    { //内圆
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '50%'],
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: .5,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff'
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        }
                    },
                ]
            }
            this.chatData4 = {
                series: [{ //内圆
                        type: 'pie',
                        radius: '80%',
                        center: ['50%', '50%'],
                        z: 0,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff',
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        },
                    },
                    {
                        type: 'gauge',
                        name: '外层辅助',
                        radius: '90%',
                        startAngle: '225',
                        endAngle: '-45',
                        splitNumber: '100',
                        pointer: {
                            show: false
                        },
                        detail: {
                            show: false,
                        },
                        data: [{
                            value: 1
                        }],
                        title: {
                            show: true,
                            offsetCenter: [0, 30],
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontWeight: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 20,
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            length: 10,
                            lineStyle: {
                                color: '#00C6FF',
                                width: 0,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    {
                        type: 'gauge',
                        radius: '83%',
                        startAngle: '225',
                        endAngle: '-45',
                        pointer: {
                            show: false
                        },
                        detail: {
                            formatter: function(value) {
                                var num = Math.round(value);
                                return '{bule|' + num + '}' + '{size|' + '}\n{radius| 吊高（m）\}';
                            },
                            rich: {
                                bule: {
                                    fontSize: 30,
                                    fontFamily: 'DINBold',
                                    color: '#00C6FF',
                                    fontWeight: '700',
                                    padding: [10, 0, 0, 0],
                                },
                                radius: {
                                    width: 175,
                                    height: 0,
                                    fontSize: 15,
                                    color: '#999',
                                    borderRadius: 10,
                                    textAlign: 'center',
                                },
                                size: {
                                    height: 100,
                                    padding: [0, 0, 0, 0]
                                }
                            },
                            "offsetCenter": ['0%', "0%"],
                        },
                        data: [{
                            value: res.realTimeDataVos[3].realData.toFixed(2),
                            name: '吊高（m）'
                        }],
                        title: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [0.91, color],
                                    [1, '#F4F4F4']
                                ],
                                width: 15,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                            length: 25,
                            lineStyle: {
                                color: '#00377a',
                                width: 2,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        },
                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        z: 2,
                        radius: '60%',
                        startAngle: '225',
                        endAngle: '-45',
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        detail: {
                            show: 0
                        }
                    },
                    {
                        name: "白色圈刻度",
                        type: "gauge",
                        radius: "60%",
                        startAngle: 225, //刻度起始
                        endAngle: -45, //刻度结束
                        z: 4,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 16, //刻度节点线长度
                            lineStyle: {
                                width: 2,
                                color: 'rgba(1,244,255, 0.9)'
                            } //刻度节点线
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,0)',
                            fontSize: 12,
                        }, //刻度节点文字颜色
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        detail: {
                            show: false
                        },
                        data: [{
                            value: 0,
                            name: ""
                        }]
                    },
                    { //内圆
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '50%'],
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: .5,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff'
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        }
                    },
                ]
            }
            this.chatData5 = {
                series: [{ //内圆
                        type: 'pie',
                        radius: '80%',
                        center: ['50%', '50%'],
                        z: 0,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff',
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        },
                    },
                    {
                        type: 'gauge',
                        name: '外层辅助',
                        radius: '90%',
                        startAngle: '225',
                        endAngle: '-45',
                        splitNumber: '100',
                        pointer: {
                            show: false
                        },
                        detail: {
                            show: false,
                        },
                        data: [{
                            value: 1
                        }],
                        title: {
                            show: true,
                            offsetCenter: [0, 30],
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontWeight: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 20,
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            length: 10,
                            lineStyle: {
                                color: '#00C6FF',
                                width: 0,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    {
                        type: 'gauge',
                        radius: '83%',
                        startAngle: '225',
                        endAngle: '-45',
                        pointer: {
                            show: false
                        },
                        detail: {
                            formatter: function(value) {
                                var num = Math.round(value);
                                return '{bule|' + num + '}' + '{size|' + '}\n{radius| 倾角A（°）\}';
                            },
                            rich: {
                                bule: {
                                    fontSize: 30,
                                    fontFamily: 'DINBold',
                                    color: '#00C6FF',
                                    fontWeight: '700',
                                    padding: [10, 0, 0, 0],
                                },
                                radius: {
                                    width: 175,
                                    height: 0,
                                    fontSize: 15,
                                    color: '#999',
                                    borderRadius: 10,
                                    textAlign: 'center',
                                },
                                size: {
                                    height: 100,
                                    padding: [0, 0, 0, 0]
                                }
                            },
                            "offsetCenter": ['0%', "0%"],
                        },
                        data: [{
                            value: res.realTimeDataVos[4].realData.toFixed(2),
                            name: '倾角A（°）'
                        }],
                        title: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [0.91, color],
                                    [1, '#F4F4F4']
                                ],
                                width: 15,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                            length: 25,
                            lineStyle: {
                                color: '#00377a',
                                width: 2,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        },
                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        z: 2,
                        radius: '60%',
                        startAngle: '225',
                        endAngle: '-45',
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        detail: {
                            show: 0
                        }
                    },
                    {
                        name: "白色圈刻度",
                        type: "gauge",
                        radius: "60%",
                        startAngle: 225, //刻度起始
                        endAngle: -45, //刻度结束
                        z: 4,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 16, //刻度节点线长度
                            lineStyle: {
                                width: 2,
                                color: 'rgba(1,244,255, 0.9)'
                            } //刻度节点线
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,0)',
                            fontSize: 12,
                        }, //刻度节点文字颜色
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        detail: {
                            show: false
                        },
                        data: [{
                            value: 0,
                            name: ""
                        }]
                    },
                    { //内圆
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '50%'],
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: .5,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff'
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        }
                    },
                ]
            }
            this.chatData6 = {
                series: [{ //内圆
                        type: 'pie',
                        radius: '80%',
                        center: ['50%', '50%'],
                        z: 0,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, 1, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff',
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        },
                    },
                    {
                        type: 'gauge',
                        name: '外层辅助',
                        radius: '90%',
                        startAngle: '225',
                        endAngle: '-45',
                        splitNumber: '100',
                        pointer: {
                            show: false
                        },
                        detail: {
                            show: false,
                        },
                        data: [{
                            value: 1
                        }],
                        title: {
                            show: true,
                            offsetCenter: [0, 30],
                            textStyle: {
                                color: '#fff',
                                fontStyle: 'normal',
                                fontWeight: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 20,
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: true,
                            length: 10,
                            lineStyle: {
                                color: '#00C6FF',
                                width: 0,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        }
                    },
                    {
                        type: 'gauge',
                        radius: '83%',
                        startAngle: '225',
                        endAngle: '-45',
                        pointer: {
                            show: false
                        },
                        detail: {
                            formatter: function(value) {
                                var num = Math.round(value);
                                return '{bule|' + num + '}' + '{size|' + '}\n{radius| 倾角B（°）\}';
                            },
                            rich: {
                                bule: {
                                    fontSize: 30,
                                    fontFamily: 'DINBold',
                                    color: '#00C6FF',
                                    fontWeight: '700',
                                    padding: [10, 0, 0, 0],
                                },
                                radius: {
                                    width: 175,
                                    height: 0,
                                    fontSize: 15,
                                    color: '#999',
                                    borderRadius: 10,
                                    textAlign: 'center',
                                },
                                size: {
                                    height: 100,
                                    padding: [0, 0, 0, 0]
                                }
                            },
                            "offsetCenter": ['0%', "0%"],
                        },
                        data: [{
                            value: res.realTimeDataVos[5].realData.toFixed(2),
                            name: '倾角B（°）'
                        }],
                        title: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: [
                                    [0.91, color],
                                    [1, '#F4F4F4']
                                ],
                                width: 15,
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                opacity: 1
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            show: false,
                            length: 25,
                            lineStyle: {
                                color: '#00377a',
                                width: 2,
                                type: 'solid',
                            },
                        },
                        axisLabel: {
                            show: false
                        },
                    },
                    {
                        name: '灰色内圈', //刻度背景
                        type: 'gauge',
                        z: 2,
                        radius: '60%',
                        startAngle: '225',
                        endAngle: '-45',
                        axisLine: { // 坐标轴线
                            lineStyle: { // 属性lineStyle控制线条样式
                                color: [
                                    [1, '#00C6FF']
                                ],
                                width: 2,
                                opacity: 1, //刻度背景宽度
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: false
                        },
                        pointer: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        detail: {
                            show: 0
                        }
                    },
                    {
                        name: "白色圈刻度",
                        type: "gauge",
                        radius: "60%",
                        startAngle: 225, //刻度起始
                        endAngle: -45, //刻度结束
                        z: 4,
                        axisTick: {
                            show: false
                        },
                        splitLine: {
                            length: 16, //刻度节点线长度
                            lineStyle: {
                                width: 2,
                                color: 'rgba(1,244,255, 0.9)'
                            } //刻度节点线
                        },
                        axisLabel: {
                            color: 'rgba(255,255,255,0)',
                            fontSize: 12,
                        }, //刻度节点文字颜色
                        pointer: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                opacity: 0
                            }
                        },
                        detail: {
                            show: false
                        },
                        data: [{
                            value: 0,
                            name: ""
                        }]
                    },
                    { //内圆
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '50%'],
                        z: 1,
                        itemStyle: {
                            normal: {
                                color: new this.$echarts.graphic.RadialGradient(.5, .5, .8, [{
                                        offset: 0,
                                        color: '#fff'
                                    },
                                    {
                                        offset: .5,
                                        color: '#fff'
                                    },
                                    {
                                        offset: 1,
                                        color: '#fff'
                                    }
                                ], false),
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            },
                        },
                        hoverAnimation: false,
                        label: {
                            show: false,
                        },
                        tooltip: {
                            show: false
                        }
                    },
                ]
            }
          })
      },
      getLifterDatas() {
        let data = {
          deviceId: JSON.parse(localStorage.getItem('hardwareData')).id,
          type: 2
        }
        hardwareManageAPI.getLifterData(data).then(res => {
          this.lifterData1 = res
          let weekDate = res.rtVo.map(item => {
            return item.date
          })
          let weekData = res.rtVo.map(item => {
            return item.num
          })
          this.chatData1 = {
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: weekDate
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '新增',
                    type: 'line',
                    stack: '总量',
                    data: weekData,
                    itemStyle : {
                      normal : {
                        color:'#1577FF', //改变折线点的颜色
                        lineStyle:{
                          color:'#1577FF' //改变折线颜色
                        }
                      }
                    },
                }
            ]
          }
        })
      }
    },
    mounted() {
      this.getLifterData()
      this.getLifterDatas()
    }
  }
</script>

<style scoped lang="scss">
  .realTimeTask{
      padding: 0.9375rem;
      font-size: 0.875rem;
      border-bottom: 0.0625rem solid #E5E5E5;
      .van-col--7{
        img{
          width: 100%;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    /deep/ .van-tabs{
      margin-bottom: 4 * $spacing;
    }
    /deep/ .van-tabs__wrap{
      height: 2.75rem;
      line-height: 2.75rem;
      .van-tabs__nav--card{
        border: inherit;
        margin: inherit;
        .van-tab.van-tab--active{
          background-color: #fff;
          color: #1577FF;
        }
        .van-tab{
          border: inherit;
          height: 2.75rem;
          line-height: 2.75rem;
          color: #999;
          background-color: #EBEBEB;;
        }
      }
    }
    .tableData{
      font-size: 0.875rem;
      .tableContent:nth-child(2n){
        padding: 0.625rem 0.9375rem;
        color: #666;
      }
      .tableContent:nth-child(2n + 1){
        padding: 0.625rem 0.9375rem;
        color: #666;
        background-color: #F6FAFF;
      }
      .tableTitle{
        padding: 0.625rem 0.9375rem;
        background-color: #F6F6F6;
        height: 1.25rem;
        color: #999;
      }
    }
</style>
